<template>
  <div id="app">
    <el-button @click="toAdd" type="text">添加学生</el-button>
    <el-table :data="student_list" border style="width: 100%">
      <el-table-column prop="id" label="ID" width="120"></el-table-column>
      <el-table-column prop="name" label="姓名" width="120"></el-table-column>
      <el-table-column prop="age" label="年龄" width="120"></el-table-column>
      <el-table-column prop="className" label="班级" width="120"></el-table-column>
      <el-table-column prop="mark" label="成绩" width="350">
        <template slot-scope="scope">
          <el-table :data="scope.row.mark" border>
            <el-table-column prop="数学" label="数学" width="100"></el-table-column>
            <el-table-column prop="语文" label="语文" width="100"></el-table-column>
            <el-table-column prop="英语" label="英语" width="100"></el-table-column>
          </el-table>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="150">
        <template slot-scope="scope">
          <el-button @click="setMark(scope.row.id)" type="text" size="small">设置成绩</el-button>
          <el-button @click="toEdit(scope.row)" type="text" size="small">编辑</el-button>
          <el-button @click="del(scope.row.id)" type="text" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
      <el-form ref="form" :model="item" label-width="80px">
        <el-form-item label="姓名">
          <el-input v-model="item.name"></el-input>
        </el-form-item>
        <el-form-item label="年龄">
          <el-input v-model="item.age"></el-input>
        </el-form-item>
        <el-form-item label="班级">
          <el-input v-model="item.className"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="saveStudent">立即创建</el-button>
          <el-button @click="dialogVisible = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog title="提示" :visible.sync="showMark" width="30%">
      <el-form ref="form" :model="mark" label-width="80px">
        <el-form-item label="数学">
          <el-input v-model="mark.数学"></el-input>
        </el-form-item>
        <el-form-item label="语文">
          <el-input v-model="mark.语文"></el-input>
        </el-form-item>
        <el-form-item label="英语">
          <el-input v-model="mark.英语"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="saveMark">立即创建</el-button>
          <el-button @click="showMark = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios"
export default {
  methods: {
    del(id) {
      axios.post(this.base_url + '/delete/' + id).then((res) => {
        this.student_list = res.data;
      })
    },
    toAdd(){
      this.resetItem();
      this.dialogVisible = true;
    },
    toEdit(el){
      this.item = el;
      this.dialogVisible = true;
    },
    getStudent(){
      axios.get(this.base_url + '/student').then((res) => {
        this.student_list = res.data;
        
      })
    },
    saveStudent() {
      axios.post(this.base_url + '/student',{student:this.item}).then((res) => {
        this.student_list = res.data;
      }).catch((err) => {
        console.log(err);
      });
      this.resetItem();
    },
    resetItem() {
      this.item = { id: 0, name: "", age: "", className: "",mark:[{'数学':0,'语文':0,'英语':0}]};
      this.dialogVisible = false;
    },
    setMark(id){
      this.currentId = id;
      for(var i=0;i<this.student_list.length;i++){
        if(id == this.student_list[i]['id']){
          this.mark = this.student_list[i]['mark'][0];
          break;
        }
      }
      this.showMark = true;
    },
    saveMark(){
      console.log(this.mark);
      var arr = {};
      for(var i=0;i<this.student_list.length;i++){
        if(this.currentId == this.student_list[i]['id']){
          arr = this.student_list[i];
          break;
        }
      }
      if(arr['id']){
        arr.mark.splice(0,1,this.mark);
        this.item = arr;
        this.saveStudent();
      }
      this.showMark = false;
    },
    resetCourse(){
      
    },
  },

  data() {
    return {
      student_list: [],
      data_list: [],
      item: { id: 0, name: "", age: "", className: "",mark:[{'数学':0,'语文':0,'英语':0}]},
      dialogVisible:false,
      showMark:false,
      base_url:process.env.VUE_APP_BASEURL,
      mark:{'数学':0,'语文':0,'英语':0},
      currentId:0,
    };
  },
  created() {
    this.getStudent();
  },
};
</script>